<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>

<ul id="box" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>
<h2>flex-wrap:wrap</h2>
<ul id="box2" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>
<h2>flex-wrap:wrap-reverse</h2>
<ul id="box3" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>

	<style>
		.box{
			display:-webkit-flex;
			display:flex;
			width:220px;margin:0;padding:10px;list-style:none; list-style-type:none; background-color:#eee;}
		.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
		#box{
			-webkit-flex-wrap:nowrap;
			flex-wrap:nowrap;
		}
		#box2{
			-webkit-flex-wrap:wrap;
			flex-wrap:wrap;
		}
		#box3{
			-webkit-flex-wrap:wrap-reverse;
			flex-wrap:wrap-reverse;
		}
	</style>

</body>
</html>
